<script setup lang="ts">
import {ref, computed} from "vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElIcon } from 'element-plus';
import { Edit, Check, Close } from '@element-plus/icons-vue';
import {getUserPersonalInfoService, updatePersonalInfoService} from "@/api/user.js"; // 引入图标组件
import {JobResume} from "@/api/analysis";
import { ElMessage } from 'element-plus'
import {base_radar,skill_pie} from "@/view/analysis/analysis_echarts/Resume_radar";

const location = ref([
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'shanghai',
        label: '上海',
      },

    ],
  },
  {
    value: '江苏',
    label: '江苏',
    children: [
      {
        value: '南京',
        label: '南京',
      },

    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '深圳',
        label: '深圳',
      },

    ],
  },
]);


const userInfo = ref({
  name: '张三',
  birthdate: '1995-04-12',
  degree: '硕士',
  school: '北京大学',
  specialized: '计算机科学与技术',
  intention: '前端开发工程师',
  skills: 'JavaScript, Vue.js, React, Node.js, HTML, CSS',
  projects: '个人博客网站, 电商后台管理系统, 交互式数据分析平台',
  phone: '13800138000',
  location:'',
  experiment: '1-3年'
})



const resumeScore= ref({
  degree: '硕士',
  tags: '前端开发工程师',
  skills: 'JavaScript, Vue.js, React, Node.js, HTML, CSS',
  location:'',
  experience: '1-3年'
})

// let keys=ref('')
const locaSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    userInfo.value.location = findSecondLevelLabel(location.value);

  }
};

//获取用户信息
async function getUserInfo(){
  let res = await getUserPersonalInfoService()
  userInfo.value = res.data.resume
  // console.log(userInfo.value)
  resumeEcharts()
}
async function resumeEcharts(){
  resumeScore.value.degree=userInfo.value.degree
  resumeScore.value.tags=userInfo.value.intention
  resumeScore.value.skills=userInfo.value.skills
  resumeScore.value.location=userInfo.value.location
  resumeScore.value.experience=userInfo.value.experiment
  // console.log(resumeScore.value)
  let result=await JobResume(resumeScore.value)
  const degreeScore=result.data.degreeScore
  const experienceScore=result.data.experienceScore
  const jobDifference =result.data.jobDifference*10
  const jobSuitScore=(result.data.jobSuitScore*100)
  const jobSuitScore2=jobSuitScore.toFixed(2)
  const noSkillMap=result.data.noSkillMap
  const rankSkillMap=result.data.rankSkillMap
  const salaryScore=result.data.salaryScore
  const salaryScore2=salaryScore.toFixed(2);
  const aveScore=(degreeScore+experienceScore+jobDifference+jobSuitScore+salaryScore)/5
  const aveScore2 = aveScore.toFixed(2);
  base_radar(degreeScore,experienceScore,jobDifference,jobSuitScore2,salaryScore2,aveScore2)
  keys.value = Object.keys(noSkillMap);
  skill_pie(rankSkillMap)
}
getUserInfo();


const isEditing = ref(false);

const toggleEdit = () => {
  isEditing.value = !isEditing.value;
};
const displaySuggestion = computed(() => {
  // 直接使用 keys.value 来访问数组，并判断其长度
  return keys.value.length ? `建议学习${keys.value.join(', ')}等重要技能` : null;
});

const saveChanges = async () => {
  // 实现保存逻辑，比如提交表单或API调用
  // console.log(userInfo.value)
  updatePersonalInfoService(userInfo.value)
  ElMessage.success('保存成功');
  toggleEdit(); // 保存后返回查看模式
  await resumeEcharts()

};

const cancelEdit = () => {
  console.log("取消"); // 添加这行进行调试
  toggleEdit(); // 取消编辑，回到查看模式
};

// 假设这些数据可以从API获取，这里直接定义为静态数据
const industries = [
  { id: 1, name: 'IT技术' },
  { id: 2, name: '金融财务' },
];
const subCareers = ref([]);
let keys=ref([]);
const selectedIndustry = ref(null);
const selectedSubCareer = ref(null);
const showJobIntentDialog = ref(false);

const fetchSubCareers = () => {
  // 模拟根据行业ID获取子职业列表
  if (selectedIndustry.value) {
    // 这里应该是调用API获取子职业列表，简化为直接设定
    subCareers.value = [
      { id: 11, name: '前端开发', industryId: 1 },
      { id: 12, name: '后端开发', industryId: 1 },
      // 更多子职业...
    ].filter(subCareer => subCareer.industryId === selectedIndustry.value);
  } else {
    subCareers.value = [];
  }
};

const tempJobIntention = ref('');

const confirmJobIntent = () => {
  let intentionText = '';
  if (selectedIndustry.value && selectedSubCareer.value) {
    intentionText = `${industries.find(ind => ind.id === selectedIndustry.value)?.name}-${subCareers.value.find(sub => sub.id === selectedSubCareer.value)?.name}`;
  }

  // 更新到tempJobIntention，实际场景中可能需要更复杂的逻辑来决定何时以及如何更新specialized
  tempJobIntention.value = intentionText;
  userInfo.value.intention = intentionText;
  // 关闭对话框
  showJobIntentDialog.value = false;

  console.log('已选择的求职意向:', intentionText);
};

</script>


<template>
  <!-- Start Candidates Profile Area -->
    <div class="candidates-profile-content">
      <el-form class="profile-info" label-position="top">
        <h3>个人信息</h3>
        <el-row :gutter="18" justify="space-between">

          <el-col :span="6">
            <el-form-item label="姓名">
              <template v-if="isEditing">
                <el-input v-model="userInfo.name"></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.name }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="出生日期">
              <template v-if="isEditing">
                <el-date-picker v-model="userInfo.birthdate" type="date"></el-date-picker>
              </template>
              <template v-else>
                <span>{{ userInfo.birthdate }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="联系电话">
              <template v-if="isEditing">
                <el-input v-model="userInfo.phone"></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.phone }}</span>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="18" justify="space-between">
          <el-col :span="6">
            <el-form-item label="学历">
              <template v-if="isEditing">
                <el-select v-model="userInfo.degree" placeholder="请选择学历">
                  <el-option label="博士" value="博士"></el-option>
                  <el-option label="硕士" value="硕士"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="大专" value="大专"></el-option>
                  <el-option label="中专" value="高中"></el-option>
                  <el-option label="高中" value="中专/中技"></el-option>
                  <el-option label="初中" value="初中及以下"></el-option>
                </el-select>
              </template>

              <template v-else>
                <span>{{ userInfo.degree }}</span>
              </template>

            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="学校">
              <template v-if="isEditing">
                <el-input v-model="userInfo.school"></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.school }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="专业">
              <template v-if="isEditing">
                <el-input v-model="userInfo.specialized"></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.specialized }}</span>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

          <el-row :gutter="18" justify="space-between">
            <el-col :span="6">
              <el-form-item label="工作地点">
                <template v-if="isEditing">
              <el-cascader :options="location"  @change="locaSelectChange" popper-class="custom-cascader-menu">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
                </template>
                <template v-else>
                    <span>{{ userInfo.location }}</span>
                </template>

              </el-form-item>
            </el-col>



          <el-col :span="6">
            <el-form-item label="求职意向">
              <template v-if="isEditing">
                <el-input
                    v-model="userInfo.intention"
                    :readonly="!!userInfo.jobIntention"
                ></el-input>
                <el-button type="text" @click="showJobIntentDialog = true">选择求职意向</el-button>
              </template>
              <template v-else>
                <span>{{ userInfo.intention }}</span>
              </template>
            </el-form-item>

            <el-dialog
                v-model="showJobIntentDialog"
                title="选择求职意向"
                width="40%"
            >
              <template #header>
                <div class="dialog-header">
                  <span>行业</span>
                  <span>具体岗位</span>
                </div>
              </template>
              <template #default>
                <div class="dialog-body">
                  <el-select v-model="selectedIndustry" placeholder="请选择行业" @change="fetchSubCareers">
                    <el-option
                        v-for="industry in industries"
                        :key="industry.id"
                        :label="industry.name"
                        :value="industry.id"
                    ></el-option>
                  </el-select>
                  <el-select v-model="selectedSubCareer" placeholder="请选择具体岗位" :disabled="!selectedIndustry">
                    <el-option
                        v-for="subCareer in subCareers"
                        :key="subCareer.id"
                        :label="subCareer.name"
                        :value="subCareer.id"
                    ></el-option>
                  </el-select>
                </div>
              </template>
              <template #footer>
      <span class="dialog-footer">
        <el-button @click="showJobIntentDialog = false">取消</el-button>
        <el-button type="primary" :disabled="!selectedSubCareer" @click="confirmJobIntent">确定</el-button>
      </span>
              </template>
            </el-dialog>

          </el-col>

          <el-col :span="6">
            <el-form-item label="工作资历（年）">

              <template v-if="isEditing">
                <el-input v-model="userInfo.experiment"></el-input>
              </template>
              <template v-else>
                <span>{{userInfo.experiment }}</span>
              </template>

            </el-form-item>
          </el-col>
            </el-row>

            <el-row>
          <el-col :span="24">
            <el-form-item label="专业技能">
              <template v-if="isEditing">
                <el-input
                    v-model="userInfo.skills"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入专业技能"
                    style="width: 400px; height: 100px"
                ></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.skills }}</span>
              </template>
            </el-form-item>
          </el-col>
            </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目经历">
              <template v-if="isEditing">
                <el-input
                    v-model="userInfo.projects"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入项目经历"
                    style="width: 400px; height: 100px"
                ></el-input>
              </template>
              <template v-else>
                <span>{{ userInfo.projects }}</span>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="button-group">
            <el-button
                v-if="!isEditing"
                @click="toggleEdit"
                type="text"
                :icon="Edit"
                size="large"
                class="edit-button"> <!-- 添加这个类名 -->
              修改
            </el-button>

            <el-button
                v-else
                @click="saveChanges"
                type="primary"
                :icon="Check"
                size="large">
              保存
            </el-button>

            <el-button
                v-if="isEditing"
                @click="cancelEdit"
                type="danger"
                :icon="Close"
                size="large">
              取消
            </el-button>
          </div>

        </el-row>
      </el-form>


      <el-row>

      </el-row>
      <el-row justify="space-between">
        <div id="main_radar" style="width:100%;height:600px" ></div>
      </el-row>

      <el-row justify="space-between">
        <div id="main_pie" style="width:100%;height:600px" ></div>
      </el-row>
      <el-row>
        <div v-if="displaySuggestion">
          <el-text class="mx-1" type="warning" size="large">{{ displaySuggestion }}</el-text>
        </div>
      </el-row>



    </div>



  <!-- End Candidates Profile Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";


.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.button-group {
  display: flex;
  justify-content: flex-end; /* 保持这行代码，确保按钮向右对齐 */
  gap: 10px; /* 在按钮间添加间隔，提升视觉体验 */
  margin-top: 16px;
}

.el-button {
  /* 自定义按钮的圆角大小 */
  width: 200px;
  border-radius: 16px; /* 你可以根据需要调整这个数值 */
}

.edit-button {
  border: 2px solid #1890ff; /* 蓝色边框，可以根据需要调整颜色 */
  border-radius: 16px; /* 保持圆角风格，可调整数值 */
  padding: 8px 16px; /* 调整内边距以适应边框，根据实际需求调整 */
}

/* 如果需要在悬停时改变边框颜色，可以添加如下样式 */
.edit-button:hover {
  border-color: #40a9ff; /* 更改悬停时的边框颜色 */
}

</style>
